<script setup>
import { ref,onMounted,onUnmounted } from 'vue'
const mceRef = ref('')
const content = ref('')
onMounted(() => {
    // 初始化编辑器
    tinymce.init({
        // 方法一
        // selector:'#mce',
        // 方法二
        target:mceRef.value,

        // 中文
        language:'zh-Hans',

        // 关闭右上角广告
        promotion:false,

        // 关闭右下角广告
        branding:false,

        // 关闭状态栏
        statusbar:false,

        // 插件
        plugins:['table','preview','fullscreen','link','image']
    })
})

onUnmounted(() =>{
    // 销毁编辑器
    tinymce.get('mce').destroy()
})

const submit = () => {
    // 取值 
    // 方法一  页面仅有一个tinymce
    // content.value = tinymce.activeEditor.getContent()

    // 方法二
    content.value = tinymce.get('mce').getContent()

    console.log(content.value);
}
</script>


<template>
    <textarea id="mce" ref="mceRef"></textarea>
    <el-button type="primary" @click="submit">提交</el-button>
    <div v-html="content"></div>
</template>